<template>
	<view>
		<view class="search-title">
			筛选
		</view>
		<view class="search-wrap">
			<view class="ipt-wrap">
				<view class="left-label">所属站点</view>
				<view class="right-label">
					<picker @change="stnmPickerChange" :value="nameindex" :range="arraysname">
						<view class="uni-input">{{nameindex==9?'点击选择':arraysname[nameindex]}}</view>
					</picker>
				</view>
			</view>
			
			<view class="ipt-wrap">
				<view class="left-label">
					时间
				</view>
				<view class="right-label">
					<picker mode="date" :value="specificDate"   @change="TimeChange($event,'specificDate')">
						<view class="uni-input">{{specificDate?specificDate:'点击选择'}}</view>
					</picker>
			
			
				</view>
			</view>

		</view>
		
		
		<view class="item-wrap" v-for="item in dataList" :key="item.id">
			<view class="status-wrap">
				<span style="color:blue" v-show="item.approveStatus=='00'">未提交</span>
				<span style="color:blue" v-show="item.approveStatus=='01'">待审批</span>
				<span style="color:red" v-show="item.approveStatus=='10'">已驳回</span>
				<span style="color:green" v-show="item.approveStatus=='11'">已通过</span>
			</view>
			<view class="main-title">
				{{item.userName}}
			</view>
			
			<view class="item-desc">
				<text>外出时间:</text>
				<text>{{item.beginDate}}~{{item.endDate}}</text>
			</view>
			<view class="item-desc">
				<text>外出时长:</text>
				<text>{{item.hours}}</text>
			</view>
			
			<view class="item-desc">
				<text>地点:</text>
				<text>{{item.location}}</text>
			</view>
			<view class="item-desc">
				<text>外出事由:</text>
				<text>{{item.reason}}</text>
			</view>
			
			<view class="btns-wrap">
				<view class="del-btn" v-show="(item.approveStatus=='00'||item.approveStatus=='10')&&item.userCode==user.userNo" @tap="del(item)">删除</view>
				<view class="edit-btn" v-show="(item.approveStatus=='00'||item.approveStatus=='10')&&item.userCode==user.userNo" @tap="edit(item)">编辑</view>
				<view class="back-btn" @tap="back(item)" v-show="item.approveStatus=='01'&&item.userCode==user.userNo">撤回</view>
				<view class="sub-btn" @tap="sub(item)" v-show="item.approveStatus=='00'&&item.userCode==user.userNo">提交</view>
				<view class="edit-btn" @tap="check(item)" v-show="arraysname.indexOf(item.stnm)!=-1&&isCheckdata&&item.approveStatus=='01'">审核</view>
			</view>
		</view>
		
		<view style="text-align: center;padding:6rpx 0" v-if="!canload">
			没有更多了
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPage:1,
				isCheckdata:false,
				maintenanceTime:'选择时间',
				arraysname:[],
				nameindex:9,
				user:{},
				specificDate:'',
				maintenanceTimeEnd:'',
				stcdList:[],
				dataList:[],
				user:{},
				canload:true
			}
		},
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				uni.navigateTo({
					url: '/pages/waichuguanli/add'
				});

			}else if(index === 1){
				uni.navigateTo({
					url: '/pages/waichuguanli/add'
				});
			}
		},
		onShow(){
			this.getData()
		},
		onPullDownRefresh:function(){
			
			this.getData()
		 },
		onReachBottom() {
			
			this.getData()	
		},
		onLoad(){
			
			this.user=JSON.parse(uni.getStorageSync("userinfo"))
			let roleCode = this.user.roleNoList.join(',');
			
			if (roleCode.indexOf('JS-00000007') > -1) {
			  this.isCheckdata = true;
			} else {
			  this.isCheckdata = false;
			}
			this.stcdList=this.user.stcdList
			this.arraysname=this.stcdList.map(item=>{
				return item.stnm
			})
			this.getData()
			
			
		},
		methods: {
			TimeChange(val,type){
				
				this[type]=val.detail.value
				this.canload=true
				this.dataList=[]
				this.currentPage=1
				this.getData()
			},
			stnmPickerChange(val){
				this.nameindex=val.detail.value
				this.canload=true
				this.dataList=[]
				this.currentPage=1
				this.getData()
			},
			check(item){
				uni.navigateTo({
					url: '/pages/waichuguanli/detail?pagedata='+JSON.stringify(item)
				});
			},
			edit(item){
				uni.navigateTo({
					url: '/pages/waichuguanli/add?pagedata='+JSON.stringify(item)
				});
			},
			sub(item){
				let that=this
				uni.showModal({
					title: '提示',
					content: '确定提交？',
					success: function (res) {
						if (res.confirm) {
							console.log(item)
							that.apipost('/soilWater/manage/outside/edit/submitOutApply',{
								id:item.id
							},true).then(res => {
								console.log(res)
								if(res.code==1){
									uni.showToast({
										icon: 'none',
										duration:4000,
										title: '操作成功'
									});
									that.getData()
								}
								
							}).catch(err=>{
								console.log(err)
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			
			},
			back(item){
				let that=this
				uni.showModal({
					title: '提示',
					content: '确定撤回？',
					success: function (res) {
						if (res.confirm) {
							console.log(item)
							that.apipost('/soilWater/manage/outside/edit/revokeOutApply',{
								id:item.id
							},true).then(res => {
								
								if(res.code==1){
									uni.showToast({
										icon: 'none',
										duration:4000,
										title: '操作成功'
									});
									that.getData()
								}
								
							}).catch(err=>{
								console.log(err)
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			
			},
			del(item){
				let that=this
				uni.showModal({
					title: '提示',
					content: '确定删除？',
					success: function (res) {
						if (res.confirm) {
							console.log(item)
							that.apipost('/soilWater/manage/outside/remove/delOutApply',{
								id:item.id
							},true).then(res => {
								
								if(res.code==1){
									uni.showToast({
										icon: 'none',
										duration:4000,
										title: '操作成功'
									});
									that.getData()
								}
								
							}).catch(err=>{
								console.log(err)
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			getData(){
				let that=this
				if(!this.canload){
					return
				}
				let transdata={
					stType:'',
					specificDate:this.specificDate,
					currentPage:that.currentPage,
					pageSize:10,
					stcd:''
				}
				if(this.nameindex!=9){
					transdata.stcd=this.stcdList.filter(item=>{
						return item.stnm===this.arraysname[this.nameindex]
					})[0].stcd
					
					transdata.stType=this.stcdList.filter(item=>{
						return item.stnm===this.arraysname[this.nameindex]
					})[0].stType
				}else{
					transdata.stcd=''
					transdata.stType=''
				}
				that.apipost('/soilWater/manage/outside/view/pageOutApply',transdata,false).then(res => {
					that.currentPage++
					uni.stopPullDownRefresh()
					if(res.code==1){
						if(res.object.dataList.length<10){
							that.canload=false
						}
						that.dataList=that.dataList.concat(res.object.dataList)
					}
					
				}).catch(err=>{
					console.log(err)
				});
			}
		}
	}
</script>

<style>
	.main-title{
		padding:16rpx 0;
		font-size:28rpx;
		font-weight:bold;
	}
	.status-wrap{
		position:absolute;
		right:40rpx;
		top:40rpx;
	}
	.item-wrap{
		position:relative;
		margin:30rpx auto 0 auto; 
		width: 702rpx;
		padding:20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 10rpx 0rpx #D4E5FF;
		border-radius: 10rpx;
	}
	.search-wrap .ipt-wrap{
		height:84rpx;
		display:flex;
		align-items: center;
		justify-content: space-between;
		
		border-bottom: rgba(63,140,255,0.2) 1rpx solid;
	}
	.search-wrap{
		background:#fff;
		padding:0 40rpx;
	}
	page{
		height:100%;
		
		background:#F5F9FF;
	}
	.search-title{
		padding-left:48rpx;
		height:90rpx;
		display:flex;
		align-items: center;
		font-weight:bold;
		font-size:34rpx;
	}
	.btns-wrap{
		margin-top:40rpx;
		display:flex;
		justify-content: flex-end;
	}
	
	.btns-wrap .back-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		color:#fff;
		width: 130rpx;
		height: 48rpx;
		background: orange;
		border-radius: 4rpx;
		margin-right:12rpx;
	}
	.btns-wrap .sub-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		color:#fff;
		width: 130rpx;
		height: 48rpx;
		background: blue;
		border-radius: 4rpx;
		margin-right:12rpx;
	}
	
	.btns-wrap .del-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		color:#fff;
		width: 130rpx;
		height: 48rpx;
		background: #FA5151;
		border-radius: 4rpx;
		margin-right:12rpx;
	}
	
	.btns-wrap .edit-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		color:#fff;
		width: 130rpx;
		height: 48rpx;
		background: #52C41B;
		border-radius: 4rpx;
		margin-right:12rpx;
	}

</style>
